<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

    <title>修改登录密码</title>
    <link rel="stylesheet" href="../css/base.css"/>
    <style>
        /*头部css*/
        header{
            height: 1.3rem;
            padding-top: 0.4rem;
            line-height: 0.93rem;
            width: 100%;
            background-color: #fff;
            position:fixed;
            z-index:11;

        }
        header h3{
            text-align: center;
            color:#686868;
            font-size: 0.36rem;
        }
        header  i,header em{
            background: url("../img/b_left_03.png") no-repeat center;
            height: 0.9rem;
            width: 0.6rem;
            position: absolute;
            -webkit-background-size: 100%;
            background-size: 100%;
        }
        header  i{
            left: 2%;
            top: 25%;
        }
        .main{
            padding-top: 1.8rem;
        }
        .change_login_password .send{

            font-size:0.24rem;
            color:#b3b3b3;
            padding-left: 0.3rem;
            height: 0.85rem;
            line-height: 0.85rem;
            margin-bottom: 0.3rem;
            border-top:10px solid #b3b3b3;
        }
        .password_change{
            width: 100%;
            height: 2.4rem;
        }
        .password_change form{
            width: 100%;
            height: 2.4rem;
        }
        .message_port{
            width: 100%;
            position: relative;
        }
        .message_port input,.new_password input{
            width: 90%;
            position: relative;
            left: 5%;
            height: 0.95rem;
            line-height: 0.95rem;
            border:2px solid #5f321a;
            text-indent: 2em;
        }
        .message_port input{
            margin-bottom: 0.3rem;
        }
        .message_port em{
            position: absolute;
            height: 0.85rem;
            width: 1.3rem;
            top: 5%;
            right: 6%;
            background-color: #c7c7c7;
            color:#fff;
            font-size: 0.3rem;
           padding-left: 0.3rem;
            line-height: 0.85rem;
        }
        .new_password  i{
            position: absolute;
            height: 0.85rem;
            width: 0.6rem;
            right: 6%;
            background: url("../img/eye.png") no-repeat center;
            -webkit-background-size: 100%;
            background-size: 100%;
        }
        .confirm{
            width: 90%;
            padding:0.3rem 0;
            background-color: #5f321a;
            color:#fff;
            position: relative;
            left: 5%;
            font-size: 0.36rem;
        }
        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #b8b8b8; opacity:1;
        }

        ::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #fff;opacity:1;
        }

        input:-ms-input-placeholder{
            color: #b8b8b8;opacity:1;
        }

        input::-webkit-input-placeholder{
            color: #b8b8b8;opacity:1;
        }
    </style>
</head>
<body>

<div class="layer change_login_password">
    <header class="clearfix">
        <i onclick="back()"></i>
        <h3>忘记登录密码</h3>
    </header>
   <div class="main">
       <p class="send">验证码已发送到您的手机，请注意查收</p>
       <div class="password_change clearfix ">
           <form action="" class="clearfix">
               <div class="message_port">
                   <input type="text" placeholder="请输入验证码" autofocus/> <em><del class="count_down">60</del> S</em>
               </div>
               <div class="new_password">
                   <input type="password" class="password" placeholder="新密码，6-12位英文或数字"/> <i class="eye"></i>
               </div>
           </form>
       </div>
       <button class="confirm">确定</button>
   </div>
</div>
<script src="../js/x_rem.js"></script>
<script src="../js/all.js"></script>
<script src="../js/base.js"></script>
<script src="../js/jquery.js"></script>
<script>
  $(function(){
     //刚进入到这个页面的时候就要开始倒计时了
      var count=60;
        var timer=setInterval(function(){
            count--;
            $(".count_down").text(count);
            if(count<0){
                clearInterval(timer);
                $(".count_down").text("重新发送");
                $(".message_port input").val("");
                count=60;
            }
        },1000);
      //http://192.168.1.126
      //先校验验证码 在校验密码
            $(".message_port input").blur(function(){
                // 验证是否为空
                console.log($(".message_port input").val());
                if(isNotBlank($(".message_port input").val())){
                    var message_port=$(".message_port input").val();
                   //从本地取出验证码
                   var find_code=localStorage.getItem("find_code").replace(/\"/g,"");
                   if(find_code !==message_port){
                       alert("验证码不正确");
                       $(".message_port input").val("");
                       return false;
                   }
               }/*else{
                   alert("不能为空");
                   return false;
               }*/
            });
      //校验密码
      $(".confirm").click(function(){
          //isNumberOr_Letter();
          var regu = "^[0-9a-zA-Z]{6,12}$";
          var re = new RegExp(regu);
         // console.log($(".password").val());
          //发送ajax
          if (re.test($(".password").val())) {
              var parm={};
               //保存密码  发送给后台
              var password= $(".password").val();
              parm.password=password;
              console.log(JSON.stringify(parm));
              $.ajax({
                  xhrFields: {
                      withCredentials: true
                  },
                  type:"post",
                 // contentType:'application/json;charset=UTF-8',
                  dataType: 'json',
                  url:baseUrl+"/student/updatePassword",
                 data: parm,
                  success: function (data) {
                      console.log(data);
                      if(data.code=="success"){
                          localStorage.removeItem("find_code");
                          localStorage.removeItem("phone");
                          window.location.href="login.html";
                      }
                  }
              })
          }
          else{
              $("input").val("");
              alert("密码格式不正确");
              return false;
          }
      });

      //校验密码

      //验证密码不能为空
      function isNotBlank(data) {
          return (data == "" || typeof(data)  == "undefined"|| data == null ) ? false : true;
      }
      //点击小眼睛 改变input的状态
      var flag=true;
      $(".eye").click(function(){
          if(flag){
              $(".new_password>input[type='password']").attr("type","text");
              $(this).css("background-image","url(../img/close_eyes.png)");
              flag=false;
          }else{
              $(".new_password>input[type='text']").attr("type","password");
              $(this).css("background-image","url(../img/eye.png)");
              flag=true;
          }
      })
  })
</script>
</body>
</html>